<template>
  <el-container class="projectLayout">
  <el-header class="DEHeader">
    <div class="projectTitle">
      <span class="fontTitle">DE-地铁设备全生命周期管理系统</span>
    </div>
    <div class="goBack">
      <button class="nav-btn" ref="navBtn" @mouseenter="navBtnOpenEnter"  @mouseleave="navBtnOpenOut" @click="$router.go(-1)">
  <svg class="burger" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    <rect class="burger__stroke" x="2" y="2" width="32" height="32" fill="none" stroke="" stroke-miterlimit="10"
      stroke-width="4" />
    <polyline class="burger__stroke-over" points="18 2 34 2 34 34 2 34 2 2 18 2" fill="none" stroke=""
      stroke-miterlimit="10" stroke-width="4" />
    <g class="burger__plus">
      <rect class="burger__plus-left" x="8" y="16" width="10" height="4" />
      <rect class="burger__plus-btm" x="16" y="18" width="4" height="10" />
      <rect class="burger__plus-right" x="18" y="16" width="10" height="4" />
      <rect class="burger__plus-top" x="16" y="8" width="4" height="10" />
    </g>
  </svg>
  </button>
    </div>
  </el-header>
  <el-header class="DEDesp">
    <el-row style="width: 70vw">
      <el-col :span="3">
    <h3>项目状态</h3>
    <span>某地区地铁站已上线</span>
  </el-col>
  <el-col :span="6">
    <h3>相关技术</h3>
    <span>Vue2.X、Element-ui、three.js、ECharts</span>
  </el-col>
  <el-col :span="3">
    <h3>时间</h3>
    <span>2020.10--2021.10</span>
  </el-col>
  <el-col :span="6">
    <h3>工作</h3>
    <span>数据大屏以及所有页面的前端设计以及实现</span></el-col>
  <el-col :span="6">
    <h3>介绍</h3>
    <span>通过对机电设备进行参数监测，结合对人员存在情况进行监测，按照不同的工况，运用合理的算法，全系统联动控制，实现综合节能</span></el-col>
</el-row>

  </el-header>
  <div class="imageClass">
    <img  v-for="item in urls" :id="item.id" :key="item.url" v-lazy="item.url"/>
  </div>
  <h3 class="sticky left">和梦想平等交易</h3>
  <h3 class="sticky right">与喧嚣保持距离</h3>
</el-container>
</template>

<script>
import gsap from 'gsap'
import anime from 'animejs/lib/anime.js'
export default {
  
  components: {},
  props: {},
  data() {
    return {
      urls:[]
    };
  },
  watch: {},
  computed: {},
  methods: {
    navBtnOpenOut() {
      gsap.to('.burger__stroke-over', 0.4, { stroke: '#fff' })
  gsap.to('.burger__plus', 0.3, { fill: '#F03694', rotation: 0, ease: 'Power4.easeInOut' })
  anime({
    targets: ['.burger__stroke-over'],
    strokeDashoffset: [0, anime.setDashoffset],
    easing: 'easeOutQuint',
    duration: 700,
    delay: 0,
    direction: 'reverse',
    autoplay: true
  })

},
  navBtnOpenEnter(){
  gsap.to('.burger__stroke-over', 0.4, { stroke: '#F03694' })
  gsap.to('.burger__plus', 0.3, { fill: '#fff', rotation: 0, ease: 'Power4.easeInOut' })
 anime({
    targets: ['.burger__stroke-over'],
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'easeInQuint',
    duration: 700,
    delay: 0,
    direction: 'normal',
    autoplay: true
  })
}
  },
  created() {},
  mounted() {
    gsap.to('.burger__stroke-over', 0.4, { stroke: '#fff' })
    gsap.to('.burger__plus', 0.3, { fill: '#F03694', rotation: 0, ease: 'Power4.easeInOut' })
    anime({
    targets: '.burger__plus',
    rotate: 135,
    transformOrigin: '50% 50%',
    duration: 100,
    easing: 'easeInQuint'
  })
  this.urls = [
    {
      url:require('../../../static/image/DE1.png'),
      id:'DE1'
  },
  {
      url:require('../../../static/image/数据大屏.png'),
      id:'DE2'
  },
  {
      url:require('../../../static/image/未命名.png'),
      id:'DE3'
  },
  {
      url:require('../../../static/image/DE2.png'),
      id:'DE4'
  },
  {
      url:require('../../../static/image/主界面.png'),
      id:'DE5'
  },
  {
      url:require('../../../static/image/出入库操作.png'),
      id:'DE6'
  },
  {
      url:require('../../../static/image/组织与权限.png'),
      id:'DE7'
  },
  ]
  },
  beforeRouteLeave(to,from,next){
      to.meta.keepAlive = true
      next(0)
    }
};
</script>
<style scoped>
.projectLayout{
  width: 100%;
  height: 100%;
  background: #000;
  color: #939BA3;
    overflow-y: scroll; 
}
.DEHeader{
  color: #fff;
  display: flex;
    justify-content: center;
    align-items: center;
    height: 80vh !important;
    margin-bottom: 15px;
    position: relative;
    min-height: 500px;
    background: #000 url(../../../static/image/DE.jpg) no-repeat center center;
    background-size: cover;
    z-index: 100;
}
.el-main{
  background: #000;
}
.projectTitle{
  flex: 1;
}
.el-icon-back{
  font-size: 30px;
}
.nav-btn {
  position: absolute;
  z-index: 101;
  top: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  appearance: none;
  outline: 0;
  cursor: pointer;
}
.burger__plus{
  
  transform-origin: 50%;
}
.fontTitle{
  font-family: 'font2';
  font-size: 45px;
}
.DEDesp{
  height: 18vh !important;
  padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sticky{
  display: none;
    color: #ffffff;
    position: fixed;
    top: 45%;
    margin: 0;
    overflow: hidden;
    height: 40px;
    width: 200px;
    z-index: 99;
}
@media (min-width: 920px){
  .sticky {
    display: block;
}
}
.sticky.left{
  left: -60px;
    text-align: right;
    font-family: 'font3';
    transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.sticky.right{
  right: -60px;
    text-align: left;
    font-family: 'font3';
    transform: scale(1) rotate(270deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/

.projectLayout::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .projectLayout::-webkit-scrollbar-button {
    display: none;
  }
  .projectLayout::-webkit-scrollbar-thumb {
    background: rgba(144, 147, 153, 0.3);
    cursor: pointer;
    border-radius: 4px;
  }
  .projectLayout::-webkit-scrollbar-corner {
    display: none;
  }
  .projectLayout::-webkit-resizer {
    display: none;
  }
 .imageClass{
  margin-left: 100px;
  margin-right: 100px;
  
 }
 .imageClass img {
  width: 100%;
 }
</style>